import React, { useState } from 'react';
import { CheckCircleTwoTone } from '@ant-design/icons';
import cls from 'classnames';
import MyIcon from '@/components/MyIcon';
import { Card, Col, Row } from 'antd';

export const assetTypeList = [
  {
    id: 1,
    title: '固定资产',
    icon: 'icon-gongsi',
    type: '',
  },
  {
    id: 2,
    title: '无形资产',
    icon: 'icon-zichan',
    type: '',
  },
  {
    id: 3,
    title: '公共基础设施',
    icon: 'icon-zhandian',
    type: '',
  },
  {
    id: 4,
    title: '政府储备物资',
    icon: 'icon-yingjiwuzi',
    type: '',
  },
  {
    id: 5,
    title: '文物文化资产',
    icon: 'icon-laptop',
    type: '',
  },
  {
    id: 6,
    title: '保障性住房',
    icon: 'icon-home1',
    type: '',
  },
  {
    id: 7,
    title: '在建工程',
    icon: 'icon-wrench',
    type: '',
  },
  {
    id: 8,
    title: 'PPP项目资产',
    icon: 'icon-yingjiduiwu',
    type: '',
  },
  {
    id: 9,
    title: '长期投资',
    icon: 'icon-zhexian1',
    type: '',
  },
];

export const AssetTypeView: any = ({ current, selectTypeNum, changeFun }: any) => {
  const prefix = 'material-upload-';

  return (
    <div className={cls(prefix + 'content-body')} style={{ display: current === 0 ? 'block' : 'none' }}>
      <Row gutter={[8, 8]} style={{ padding: '5px 5px' }}>
        {assetTypeList.map((item: any) => {
          return (
            <Col
              span={8}
              onClick={() => {
                changeFun(item.title, item.id);
              }}
              key={item.id}
            >
              <Card hoverable style={{ position: 'relative' }}>
                <Row gutter={8}>
                  <Col>
                    <MyIcon type={item.icon} style={{ fontSize: '26px' }}></MyIcon>
                  </Col>
                  <Col>
                    <div>{item.title}</div>
                  </Col>
                </Row>
                {selectTypeNum == item.id ? (
                  <CheckCircleTwoTone twoToneColor="#52c41a" style={{ position: 'absolute', top: '5px', right: '5px', fontSize: '26px' }} />
                ) : null}
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};
